import React from 'react'
import ReactDOM from 'react-dom'
import withMouse from './components'
import TestSetState from './views/a01setState'
import img from './images/cat.png'
/* 
  高阶组件
*/

// 用来测试高阶组件
const Position = props => {
  console.log('Position:', props)
  return (
    <p>
      鼠标当前位置：(x: {props.x}, y: {props.y})
    </p>
  )
}

const Cat = props => {
  return (
    <img
      src={img}
      alt='猫'
      style={{
        position: 'absolute',
        top: props.y + 64,
        left: props.x + 64
      }}
    />
  )
}
// 获取增强后的组件：
const MousePosition = withMouse(Position)
const CatImage = withMouse(Cat)
class App extends React.Component {
  state = {
    isVisible: false
  }
  handClick = () => {
    this.setState({
      isVisible: !this.state.isVisible
    })
  }
  render () {
    const { isVisible } = this.state
    return (
      <div>
        <h1 onClick={this.handClick}>高阶组件</h1>
        {/* 通过isVisible这个变量来控制组件的展示和隐藏 */}
        {isVisible && (
          <div>
            <MousePosition a='1' />
            <CatImage></CatImage>
          </div>
        )}
        <h1>测试setState</h1>
        <TestSetState></TestSetState>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
